前端小案例之侧边栏 |
您所在的位置：网站首页 › 侧边栏 css › 前端小案例之侧边栏 |
前端小案例之侧边栏
 简单侧边栏案例-隐藏右边盒子鼠标经过时显示 最近刚开始入门学习前端用简单的html结构加CSS样式写了个侧边栏的小案例在这里分享给大家。 一、案例介绍效果如下:  该案例主要是在一个sidebar盒子里面左边放一个ul做侧边栏里面的li作为每一行的内容，然后将sidebar-mask盒子定位到侧边栏的右边，用display:none将该盒子先隐藏起来，然后经过也就是hover该盒子的时候就display:block，然后就是对侧边栏每一行的li经过做了一个过渡效果padding值会撑开。 二、案例代码1.HTML结构代码如下（示例）： Document 侧边栏第一 > 我是第一个第二 > 我是第二个第三 > 我是第三个第四 > 我是第四个第五 > 我是第五个第六 > 我是第六个第七 > 我是第七个第八 > 我是第八个第九 > 我是第九个 2.CSS样式代码如下（示例）： * { margin: 0; padding: 0; } .sidebar { /* 子绝父相 */ position: relative; width: 1200px; height: 700px; margin: 50px auto; color: #ffffff; } .sidebar ul { width: 200px; height: 100%; background-color: rgba(0, 0, 0, .3); } .sidebar ul li { list-style: none; height: 50px; padding: 10px 0; transition: all .5s; } .sidebar ul li p { float: left; margin-left: 50px; } .sidebar ul li span { float: right; margin-right: 20px; } .sidebar ul li:hover { background-color: orange; padding-left:20px; cursor: pointer; } .sidebar ul li:hover .sidebar-mask { display: block; } .sidebar-mask { display: none; position: absolute; top: 50px; right: 50px; width: 900px; height: 600px; background-color: rgba(0, 0, 0, .3); text-align: center; }这里是结构与样式分离将上面的CSS样式命名为style.css然后用link导入到html文件中即可以用，也可以将样式用style标签写到html文件里的title下。 总结刚学习前端没多久，想将每天学到的小案例分享给大家，写的不好的地方还望大家多多指教。 想要加入一起学习的小伙伴可以私信我或是给我留言。 作者：vegetable-WEN 链接：前端小案例之侧边栏 来源：CSDN |
【本文地址】
今日新闻 |
推荐新闻 |